<template>
  <div id="app">
    <!--<VueEchart :option="option"></VueEchart>-->
    <CircularEyeProgress style="width: 450px;height: 450px;" />
    <CircularEyeProgress
      foreground-color="#0094ff"
      style="width: 450px;height: 450px;"
    />
    <CircularProgress style="width: 450px;height: 450px;" />

    <PictorialProgress style="width: 450px;height: 450px;" />
    <SpectrumProgress style="width: 450px;height: 450px;" />
    <WarningProgress style="width: 450px;height: 450px;" />
    <LiquidChart style="width: 450px;height: 450px;" />
  </div>
</template>

<script>
import {
  CircularEyeProgress,
  CircularProgress,
  PictorialProgress,
  SpectrumProgress,
  WarningProgress,
  LiquidChart
} from "../index";

export default {
  name: "App",
  components: {
    CircularEyeProgress,
    CircularProgress,
    PictorialProgress,
    SpectrumProgress,
    WarningProgress,
    LiquidChart
  },
  computed: {
    option() {
      return {
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" }
            ]
          }
        ]
      };
    }
  }
};
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#app {
  width: 100%;
  height: 100%;
  background: black;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
}
</style>
